.fx-dropdown {
  display: inline-block;

  .fx-dropdown-list {
    position: fixed;
    background-color: $color-white;
    transform-origin: center top;
    box-shadow: $border-shadow;
    border-radius: $border-radius-default;
    max-height: 200px;
    overflow-y: auto;
    transition: transform 0.15s;

    &.top {
      transform-origin: center bottom;

      &::after {
        content: '';
        border-bottom-color: transparent;
        border-top-color: $color-white;
        top: auto;
        bottom: -2px;
      }
    }

    &::after {
      content: '';
      position: absolute;
      left: 50%;
      top: -2px;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-bottom-color: $color-white;
      filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
    }
  }
}

.fx-dropdown-item {
  user-select: none;
  height: $height-default;
  line-height: $height-default;
  padding: 0 10px;
  cursor: pointer;
  white-space: nowrap;
  color: $font-color-default;

  &.disabled {
    cursor: not-allowed;
    color: $font-color-lowest;

    &:hover {
      background-color: transparent;
      color: $font-color-lowest;
    }
  }

  &:hover {
    background-color: $color-primary-1;
    color: $color-primary;
  }
}
